<script setup lang="ts">
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';

defineOptions({
  name: 'SelectItem',
});

const props = withDefaults(defineProps<{ value?: string | null; disabled?: boolean; name?: string }>(), {
  value: null,
  disabled: false,
  name: '',
});

const emits = defineEmits<{
  (e: 'update:checked', checked: boolean): void;
}>();

const { value } = useVModels(props, emits);

function handleUpdateChecked(value: boolean): void {
  emits('update:checked', value);
}

const darkClass = computed(() => {
  return useAppearanceSettingStore().getDarkTheme ? 'dark' : 'light';
});
</script>

<template>
  <div class="switch-item p-2 my-1" :class="darkClass">
    <span>{{ name }}</span>
    <NSelect
      v-model:value="value"
      :disabled="disabled"
      class="w-1/2"
      @update:value="handleUpdateChecked"
    />
  </div>
</template>

<style scoped lang="less">
.switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 6px;
  &.light {
    &:hover {
      background: #f4f4f5;
    }
  }
  &.dark {
    &:hover {
      background: #18181c;
    }
  }
}
</style>
